<script setup lang="ts">
const props = defineProps(['data'])
const getBtnStr = (learned:boolean):string => {
  return learned ? '已练习' : '去练习'
}
</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 20px;margin-top: 20px">
  <div v-for="(elment,index) in props.data" class="main_body_class_style" :class="{'main_body_class_un_style':elment.learned}" :key="index">
    <div style="display: flex;flex-direction: row">
      <img src='../../assets/traing_edit.png' style="width: 24px;height: 24px;">
    <div style="font-weight: bold">{{elment.title}}</div>
    </div>
    <div style="height: 20px"></div>
    <div class="frame_style" :class="{'frame_style_un':elment.learned}">
      <div style="text-align: start" v-for="(element,index) in elment.content" :key="index">{{element}}</div>
    </div>
    <div class="style_small">
      <div style="color: #999999;font-size: 14px">总计14道题</div>
      <div class="btnStyle" :class="{'unBtnStyle':elment.learned}">
        {{ getBtnStr(elment.learned) }}
      </div>
    </div>
  </div>
  </div>
</template>

<style scoped>
.frame_style{
  border-radius: 6px;
  background-color: #FFFFFF;
  height: 185px;
  border: 1px solid #C5DDFE;
  padding: 10px
}

.frame_style_un{
  border: 1px solid #DBDBDB;
}
.style_small{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  cursor: pointer;/*鼠标移动上去是手型*/
}
.main_body_class_style{
  width: 290px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 317px;
  background: url('../../assets/line_big_frame.png'),
  linear-gradient( 180deg, #E1EEFF 100%, #CDE2FF 100%);
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  border-radius: 6px;
}
.main_body_class_un_style{
  background: url('../../assets/line_big_frame.png'),
  linear-gradient( 180deg, #F2F2F2 100%, #E0E0E0 100%);
}
.btnStyle{
  padding: 6px 10px;
  width: 65px;
  height: 32px;
  background: #3C8DF9;
  border-radius: 6px 6px 6px 6px;
  align-items: center;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  text-align: center;
}

.unBtnStyle{
  background: linear-gradient(to right,#AEAEAE,#737373);
}
</style>